<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" session="false" %>
<html>
<head>
    <title>找回密码</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">
    <link href="${pageContext.request.contextPath}/static/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/font-awesome-4.3.0/css/font-awesome.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/css/select2.min.css"
          rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/custom.ui.jqgrid.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/plugins/jqGrid/css/style.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}/static/js/jquery-1.11.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/i18n/grid.locale-cn.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/jqGrid/js/minified/jquery.jqGrid.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/layer.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/layer/extend/layer.ext.js"
            type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/js/jquery.form.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/static/plugins/select2-4.0.0/dist/js/select2.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/global.js"></script>	
    <script src="${pageContext.request.contextPath}/static/js/placeholder.js"></script>
    <style type="text/css">
    .re{
    	width: 90%;
    	font-size: 25px;
    	margin-top: 15px;
    	margin: 0 auto;
    }
    .div1{
        margin: 0 auto;
    	width: 50%;
    	border: 1px solid #ccc;
    	border-radius: 0px 0px 20px 20px;
    }
    .div2{
        margin: 0 auto;
        padding: 10px 1px 5px 1px;
    	width: 50%;
    	border: 1px solid #ccc;
    	border-radius: 20px 20px 0px 0px;
    	margin-top: 10%;
    	
    }
    </style>	
</head>
<body>
<div class="">
    <div class="icon">
        <a class="icon-title">ZHANG
            LIAN</a>
    </div>
    <div class="top_left">
        <h5>
            <span></span>
        </h5>
    </div>
</div>
<div class="div2">
		<div class="re"><span >忘记密码</span></div>
</div>
<div class="div1">
    <form id="uploadForm" class="form-horizontal" style="padding-top: 10px">
    <div class="form-horizontal m-t">
    	
    	<div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>登录账号:</label>
            <div class="col-sm-8">
                <input class="form-control" name="tel" id="tel" placeholder="填写有效手机号，用于登录系统、找回密码" size="30"/>
            </div>
        </div>
    	<div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>验证码:</label>
            <div class="col-sm-8" >
                <input class="form-control" name="yzm" id="yzm" style="width:57%;float: left;"  placeholder="填写您的验证码 ，6位有效数字" size="30"/>
            	<input class="btn btn-success form-control"  type="button" id="btnSendCode"   style="width: 140px;float: right;" value="获取验证码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>登录密码:</label>
            <div class="col-sm-8">
                 <input class="form-control" type="password" name="passwd" id="passwd" placeholder="请输入密码，密码为6-16位，字母、数字或英文符号" size="30"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3  control-label"><i class="require">*</i>确认密码:</label>
            <div class="col-sm-8">
                 <input class="form-control" type="password" name="againPassword" id="againPassword" placeholder="请再次输入密码" size="30"/>
            </div>
        </div>
        
         <div style="text-align: center;margin-top: 30px;">
             <input class="btn btn-success form-control"  type="button" onclick="cancle()"  style="width: 150px;margin-right: 70px;" value="取消">
             <input class="btn btn-success form-control"  type="button" id="sub" onclick="checkTail()"  style="width: 150px;" value="提交">
         </div>
    </div>
    </form>
</div>
<script>

$(function(){
    $("#btnSendCode").click(function (){
        sendCode($("#btnSendCode"));
    });
    v = getCookieValue("secondsremained");//获取cookie值
    if(v>0){
        settime($("#btnSendCode"));//开始倒计时
    }
})

//发送验证码
function sendCode(obj){
    var phonenum = $("#tel").val();
    var result = isPhoneNum();
    if(result){
        doPostBack(phonenum);
        addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s
        settime(obj);//开始倒计时
    }
}

//校验手机号是否合法
function isPhoneNum(){
    var phonenum = $("#tel").val();
    var myreg = /^1[3|4|5|7|8]\d{9}$/; 
    if(!myreg.test(phonenum)){ 
        alert('请输入有效的手机号码！'); 
        return false; 
    }else{
        return true;
    }
}


//将手机利用ajax提交到后台的发短信接口
function doPostBack(phonenum) {
	$.post("${pageContext.request.contextPath}/register/sendMessage.action", {
     	'phone': phonenum
      }, function (result) {
          result = JSON.parse(result)
          if (result.code == 1) {
         	 layer.alert(result.msg);
          }else{
          	layer.alert(result.msg);
          }
      });
}

//开始倒计时
var countdown;
function settime(obj) { 
    countdown=getCookieValue("secondsremained");
    if (countdown == 0) { 
        obj.removeAttr("disabled");    
        obj.val("获取验证码"); 
        return;
    } else { 
        obj.attr("disabled", true); 
        obj.val("重新发送(" + countdown + ")"); 
        countdown--;
        editCookie("secondsremained",countdown,countdown+1);
    } 
    setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次
} 

function cancle(){
	<%--window.location.href = "${pageContext.request.contextPath}/admin/login.action";--%>
	 <%--因为有2个登陆页面，所以先采用后退的方式--%>
	 history.back(-1);
}
function checkTail(){
	$("#sub").attr("disabled", "true");
	var tel = $("#tel").val();
    var password = $("#passwd").val();
    var yzm = $("#yzm").val();
    var againPassword = $("#againPassword").val();
    if(!tel){
    	 alert("登录账号必填");
    	 $("#sub").removeAttr("disabled");
    	 return;
    }else if(!(/^1[3|4|5|7|8]\d{9}$/.test(tel))){ 
        alert("登录账号有误，请填写手机号格式"); 
        $("#sub").removeAttr("disabled");
        return; 
    }
    if(!yzm){
    	 alert("验证码有误，请填验证码"); 
         $("#sub").removeAttr("disabled");
         return; 
    }else if(!(/^\d{6}$/.test(yzm))){
	   	 alert("验证码有误，请填写6位有效数字"); 
	     $("#sub").removeAttr("disabled");
	     return; 
	}
    if(!password){
    	 alert("登录密码必填");
    	 $("#sub").removeAttr("disabled");
    	 return;
    }else if(!(/^[A-Za-z_0-9\x21-\x7e]{6,16}$/.test(password))){
    	 alert("登录密码有误，请填写6-16位，字母、数字或英文符号"); 
         $("#sub").removeAttr("disabled");
         return; 
    }
    
    if(!againPassword){
    	alert("确认密码必填");
   		$("#sub").removeAttr("disabled");
   	 	return;
    }else if(password != againPassword){
   	 	alert("确认密码和登录密码不匹配"); 
     	$("#sub").removeAttr("disabled");
     	return; 
	}
    
    $.post("${pageContext.request.contextPath}/register/resetPassword.action", {
    	'userName': tel,
	    'passwd': password,
	    'yzm':yzm
     }, function (result) {
         result = JSON.parse(result)
         if (result.code == 1) {
        	 layer.alert(result.msg);
        	 <%--window.location.href = "${pageContext.request.contextPath}/admin/login.action";--%>
        	 <%--因为有2个登陆页面，所以先采用后退的方式--%>
        	 history.back(-1);
         }else{
        	 $("#sub").removeAttr("disabled");
         	layer.alert(result.msg);
         }
     });
}
//发送验证码时添加cookie
function addCookie(name,value,expiresHours){ 
    var cookieString=name+"="+escape(value); 
    //判断是否设置过期时间,0代表关闭浏览器时失效
    if(expiresHours>0){ 
        var date=new Date(); 
        date.setTime(date.getTime()+expiresHours*1000); 
        cookieString=cookieString+";expires=" + date.toUTCString(); 
    } 
        document.cookie=cookieString; 
} 
//修改cookie的值
function editCookie(name,value,expiresHours){ 
    var cookieString=name+"="+escape(value); 
    if(expiresHours>0){ 
      var date=new Date(); 
      date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
      cookieString=cookieString+";expires=" + date.toGMTString(); 
    } 
      document.cookie=cookieString; 
}
//根据名字获取cookie的值
function getCookieValue(name){ 
      var strCookie=document.cookie; 
      var arrCookie=strCookie.split("; "); 
      for(var i=0;i<arrCookie.length;i++){ 
        var arr=arrCookie[i].split("="); 
        if(arr[0]==name){
          return unescape(arr[1]);
          break;
        }else{
             return ""; 
             break;
         } 
      } 
       
}
	
</script>
</body>
</html>
